<template>
  <view class="detail-page">
    <view class="header">
      <image :src="teacher.avatar" alt="教师头像" class="teacher-avatar" />
      <view class="teacher-info">
        <view class="teacher-name">{{ teacher.name }}</view>
        <view class="teacher-sex">性别: {{ teacher.sex }}</view>
        <view class="teacher-background">学历: {{ teacher.background }}</view>
        <view class="teacher-speciality">专业: {{ teacher.speciality }}</view>
        <view class="teacher-age">年龄: {{ teacher.age }}</view>
        <view class="teacher-phone">电话: {{ teacher.phone_number }}</view>
        <view class="teacher-city">城市: {{ teacher.city }}</view>
      </view>
    </view>

    <view class="course-info">
      <view class="section-title">课程信息</view>
      <view class="course-name">课程: {{ teacher.course }}</view>
      <view class="teach-method">教学方式: {{ teacher.teach_method }}</view>
      <view class="teach-time">可教学时间: {{ teacher.time }}</view>
      <view class="teach-situation">教学情况: {{ teacher.teach_situation }}</view>
      <view class="salary">期望薪资: {{ teacher.salary }}</view>
    </view>

    <view class="introduction-section">
      <view class="section-title">教师简介</view>
      <view class="introduction-text">{{ teacher.introduction }}</view>
    </view>

    <!-- 预约按钮 -->
    <view class="status-section">
      <button class="book-button" @click="openBooking">预约</button>
    </view>

    <!-- 弹出预约信息窗口 -->
    <view v-if="showBookingPopup" class="overlay">
      <view class="popup">
        <view class="popup-header">
          <view class="popup-title">预约信息</view>
        </view>
        <view class="popup-body">
          <!-- 日期选择框替代文本框 -->
		<picker mode="date" @change="handleBeginDateChange" start="2023-01-01" end="2025-12-31">
		  <view class="input-field">开始时间: {{ booking.duration_begin }}</view>
		</picker>
		<picker mode="date" @change="handleEndDateChange" start="2023-01-01" end="2025-12-31">
		  <view class="input-field">结束时间: {{ booking.duration_end }}</view>
		</picker>

          <input type="text" v-model="booking.content" placeholder="请输入具体内容" class="input-field" />
          <input type="text" v-model="booking.salary" placeholder="请输入薪资" class="input-field" />
        </view>
        <view class="popup-footer">
          <button class="confirm-button" @click="submitBooking">确认预约</button>
          <button class="cancel-button" @click="closeBooking">取消</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      teacher: {
        account: '',
        name: '',
        sex: '',
        background: '',
        speciality: '',
        age: '',
        phone_number: '',
        city: '',
        introduction: '',
        avatar: '',
        course: '',
        teach_method: '',
        time: '',
        teach_situation: '',
        salary: ''
      },
      showBookingPopup: false, // 控制预约窗口的显示
       booking: {
              content: '',
              duration_begin: '', // 预约开始时间
              duration_end: '',   // 预约结束时间
              salary: '',
              status: '-1',
        }
    };
  },
  onLoad(options) {
    const account = options.account; // 获取教师账号
    const course = options.course; // 获取课程名称
    this.loadTeacherDetails(account, course);
  },
  methods: {
    // 加载教师详情数据
    loadTeacherDetails(account, course) {
      this.$request
        .get(`/teacher/selectDetail?account=${account}&course=${course}`)
        .then(res => {
          if (res.code === '200') {
            this.teacher = res.data || {};
          } else {
            console.error('获取教师详情数据失败:', res.msg);
          }
        })
        .catch(error => {
          console.error('请求失败:', error);
        });
    },
    openBooking() {
      this.showBookingPopup = true;
    },
    closeBooking() {
      this.showBookingPopup = false;
    },
	  handleBeginDateChange(event) {
	    this.booking.duration_begin = event.target.value; // 获取开始日期
	  },
	  handleEndDateChange(event) {
	    this.booking.duration_end = event.target.value; // 获取结束日期
	  },
    submitBooking() {
      const storedUser = uni.getStorageSync('xm-user');
      const bookingData = {
        user_account: storedUser.account, // 需要在实际使用时从用户登录信息中获取
        teacher_account: this.teacher.account,
        course: this.teacher.course,
        duration_begin: this.booking.duration_begin, // 使用日期选择的时间
        duration_end: this.booking.duration_end,     // 使用日期选择的时间
        content: this.booking.content,
        salary: this.booking.salary,
		status: this.booking.status
      };

      this.$request.post('/order/create', bookingData).then(res => {
        if (res.code === '200') {
          console.log('预约成功');
		  uni.showToast({
		    icon: 'success',
		    title: '预约成功'
		  });
          this.showBookingPopup = false;
        } else {
			uni.showToast({
			  icon: 'error',
			  title: res.msg
			});
			this.closeBooking();
          console.error('预约失败:', res.msg);
        }
      }).catch(error => {
        console.error('预约请求失败:', error);
      });
    }
  }
};
</script>


<style>
/* 页面样式与之前保持一致 */
.detail-page {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
	}

	.teacher-avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		object-fit: cover;
		margin-right: 20rpx;
	}

	.teacher-info {
		flex: 1;
	}

	.teacher-name {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.teacher-sex, .teacher-background, .teacher-speciality, 
	.teacher-age, .teacher-phone, .teacher-city {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 5rpx;
	}

	.course-info, .introduction-section, .status-section {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.course-name, .teach-method, .teach-time, 
	.teach-situation, .salary, .status-text, .introduction-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 5rpx;
	}
.book-button {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  color: white;
  padding: 12rpx 24rpx;
  font-size: 30rpx;
  border-radius: 50rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
  border: none;
  margin-top: 20rpx;
  transition: transform 0.3s, box-shadow 0.3s;
}

.book-button:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.3);
}

/* 模态窗口样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup {
  width: 80%;
  max-width: 600rpx;
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
}

.close-button {
  font-size: 40rpx;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  transition: color 0.3s;
}

.close-button:hover {
  color: #333;
}

.popup-body {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.input-field {
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  font-size: 30rpx;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
}

.confirm-button {
  background: #4caf50;
  color: white;
  padding: 15rpx 30rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.confirm-button:hover {
  background: #45a049;
}

.cancel-button {
  background: #f44336;
  color: white;
  padding: 15rpx 30rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.cancel-button:hover {
  background: #e53935;
}
</style>